
<template>
  <div class="my">
    <!-- 个人信息区域 -->
    <div class="tops" :style="{background:activeColor}">
      <div class="mymain">
       
        <van-uploader v-model="fileList" :deletable="false" :after-read="submitPic" max-count="1"/>
        <!-- <img class="myimg" src="bimg/ttk.png" /> -->
         <span class="mys">{{mys}}</span>
        <div class="read">今日阅读</div>
      </div>
      <div class="denglv" v-if="denglvs">
        <span @click="denglvss">点击登录</span>
      </div>
    </div>

    <!-- 收藏区域 -->
    <van-grid :column-num="2">
      <van-grid-item icon="star-o" text="书单收藏" to="/commentshelf" />
      <van-grid-item icon="clock-o" text="历史" to='/Historys'/>
    </van-grid>
    <!-- 信息区域 -->
    <van-cell-group>
      <van-cell title="用户反馈" @click="feedback" is-link />
      <van-cell title="分享app" @click="sh" is-link />
       <van-cell title="给个好评" @click="good" is-link />
      <van-cell title="设置" @click="setup" is-link />
    </van-cell-group>
    <!-- 分享 -->
    <van-dialog class="share" v-model="shows" title="标题" show-cancel-button>
      <div>
        <span>(温馨提示：请截图分享给您的好友)发送给好友的截图内容是：</span>
          <p class="main">我正在用听听看,看免费百万小说。下载：</p>
      </div>
      <img class="sharepic" src="bimg/share.jpg" />
    </van-dialog>
    <!-- 设置 -->
    <van-dialog class="share" v-model="setups" title="标题" show-cancel-button>
      <div class="bottoms">
        <ul class="colors">
            <li v-for="(item,name) in colors" :key="name" :item="item" :style="{background:item.color}" @click="changecolor(name)"></li>
        </ul>
      </div>
    </van-dialog>
    <!-- 退出 -->
    <div style="margin: 16px;" class="bottom">
      <van-button round block type="info" native-type="submit" @click="quit" v-if="btn">退出</van-button>
    </div>
    <!-- <span @click="quit"></span> -->
    <foot />
  </div>
</template>
  

<script>
import foot from "@/components/foot.vue";
export default {
  // name: 'my',
  components: {
    foot,
  },

  props: {
    msg: String,
  },

  data() {
    return {
      mys: '',
      denglvs: true,
      btn:false,
      fileList: [
      ],
      shows:false,
      setups:false,
      colors:[
        {id:'1',color:'#FF0000'},
        {id:'2',color:'#000'},
        {id:'3',color:"#FFFF00"},
        {id:'4',color:"#00FF00"},
        {id:'5',color:'#00FFFF'},
        {id:'6',color:"#808000"},
        {id:'7',color:"#FF00FF"},
        {id:'8',color:"#FFe4b5"},
        // {id:'9',color:"#FF0000"},
      ],
      activeColor:"",
    };
  },
  created() {},

  methods: {
      submitPic (file) {
        console.log(file);
      // let params = new FormData();
      // params.append("fileUpload", file.file);
      // let config = {
      //   headers: {
      //     'Content-Type': 'application/x-www-form-urlencoded'
      //   }
      // }
      // let url = `http://www.baidu.com`;
      // this.axios.post("/api/file", params, config).then(res => {
      //   console.log("msg", res);
      // });
      },    
    // 收藏
   comment(){
     console.log(1)
     this.$router.push('/commentshelf')
   },
    quit() {
      // 获取购物车缓存
      // var shop = localStorage.getItem("shop");
        var shop = localStorage.getItem("bookh");
        // var collection = localStorage.getItem('bookx')
        console.log(Collection)
        console.log(shop)
        var namess = JSON.parse(localStorage.getItem("key"));
        shop = JSON.parse(shop);
        var Collection =localStorage.getItem('bookx');
        // console.log(Collection)
      // 放入数据库
        this.$axios
        .post("/api/incart", { shop: shop, username: namess.username,Collection:Collection })
        .then((data) => {
          console.log(data);
          if (data.data.code == 200) {
            alert(data.data.msg);
          }
        });
      // 清除数据
      localStorage.removeItem("bookh");
      // 清除收藏缓存
       localStorage.removeItem("bookx");
      // 购物车
      localStorage.removeItem("key");
      //  清除评论缓存
      localStorage.removeItem("booker");
      //  localStorage.removeItem("transmit")
      // 跳转
      this.$router.push("/Home"); 
    },
  
    denglvss() {
      this.$router.push("/denglv");
    },
    sh(){
      this.user = localStorage.getItem("key");
      console.log(this.user);
      if(this.user !== null){
         this.shows=true
      }else{
        alert('请先登录')
      }
    },
    good(){
      console.log('1')
       this.user = localStorage.getItem("key");
      console.log(this.user);
      if (this.user == null) {
        this.$dialog
          .confirm({
            message: "您还没有登录，请登录！",
            confirmButtonColor: "red",
          })
          .then(() => {
            this.$router.push("/denglv");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {
        this.$dialog
          .confirm({
            message: "感谢您对我们的支持,请到应用商店给我们好评，谢谢",
            confirmButtonColor: "red",
          })
          .then(() => {
            console.log("点击了确认");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      }
    },
    feedback(){
      console.log('1')
      this.user = localStorage.getItem("key");
      console.log(this.user);
      if (this.user == null) {
        this.$dialog
          .confirm({
            message: "您还没有登录，请登录！",
            confirmButtonColor: "red",
          })
          .then(() => {
            this.$router.push("/denglv");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {
        this.$dialog
          .confirm({
            message: "感谢您对我们的支持,请到应用商店给我们反馈信息，谢谢",
            confirmButtonColor: "red",
          })
          .then(() => {
            console.log("点击了确认");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      }
    },
    changecolor(name){
      console.log(name)
      this.activeColor=this.colors[name].color
    },
    setup(){
      console.log(1)
     this.setups = true;
    }
  },
  mounted() {
    if (localStorage.getItem("key") == null) {
      console.log("");
    } else {
      this.mys = JSON.parse(localStorage.getItem("key")).username;
      var tt = localStorage.getItem("key");

      if (this.mys) {
        this.denglvs = false;
        this.btn = true;
      }
    }
  },
};
</script>

<style>
/* 顶部内容 */
.tops {
  width: 100%;
  height: 4rem;
  background-color: rgba(46, 209, 209, 0.3);
}
/* 上传内容 */
.van-uploader{
  margin-top:.3rem ;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-left: .5rem;
}
.van-uploader__upload {
  margin: 0px;
}  
.van-uploader__preview-image{
  border-radius: 50%;
 
}
.myimg {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-top: 1rem;
  float: left;
  margin-left: 0.5rem;
}
.mys {
  float: left;
  margin-left: 0.3rem;
  font-size: .4rem;
  margin-top: .8rem;
}
.read {
  background-color: rgba(48, 46, 46, 0.493);
  float: right;
  color: #fff;
  text-align: center;
  line-height: 0.6rem;
  border-radius: 10px 0px 10px 0px;
  font-weight: 500;
  margin-top: 1rem;
  margin-right: 0.5rem;
  width: 1.5rem;
  height: 0.6rem;
}
/* 退出按钮 */
.van-button--info {
  color: #fff;
  background-color: #ee3d30;
  border: 1px solid #e08c86;
}

.mymain {
  overflow: hidden;
}
.denglv {
  width: 1.5rem;
  height: 0.6rem;
  background-color: #45cce4f3;
  /* margin: 0 auto; */
  text-align: center;
  border-radius: 0.3rem;
  line-height: 0.6rem;
  margin-left: 0.8rem;
  margin-top: 0.1rem;
  color: rgb(24, 23, 23);
}
/* 分享 */
.share{
  height: 10rem;
}
.sharepic{
 margin-left: 34.5%;
}
.main{
  text-align: left;
  margin-top: 1rem;
  margin-left: .2rem;
}
.bottoms {
  /* position: fixed; */
  width: 10rem;
  height: 8rem;
  /* bottom: 2rem; */
  background-color: #777771d5;
  width: 10rem;
  margin-bottom: -0.5rem;
  margin-right: -0.5rem;
}
.bottoms ul li{
  width: 4rem;
  height: 1rem;
  float: left;
  margin-left: 2.8%;
  /* border-radius: 50%; */
  background-color: #fff000;
  margin-top: .5rem;
}
</style>
